<template>
  <view>
    <u-popup :show="show" @close="close">
      <view class="popup-head">
        <u-button :text="item.name" shape="circle" :color="btncount === item.type?'#2F7EFC':''"
          v-for="item,index in btnList" :key="index" @click="btnChange(item)"></u-button>
      </view>
      <u-index-list>
        <template v-for="(item, index) in itemArr">
          <!-- #ifdef APP-NVUE -->
          <u-index-anchor bgColor="#fff" :text="indexList[index]"></u-index-anchor>
          <!-- #endif -->
          <u-index-item>
            <!-- #ifndef APP-NVUE -->
            <u-index-anchor bgColor="#fff" :text="indexList[index]"></u-index-anchor>
            <!-- #endif -->
            <view class="list-nav">
              <view class="list-cell" v-for="(cell, index) in item" :key="index" @click="onCell(cell,index)">
                {{cell}}
              </view>
            </view>
          </u-index-item>
        </template>
      </u-index-list>
    </u-popup>
  </view>
</template>

<script>
  export default {
    props: ['show'],
    data() {
      return {
        btnList: [{
          name: '足球',
          type: 1
        }, {
          name: '篮球',
          type: 2
        }],
        btncount: 1,
        indexList: ["*", "B", "C"],
        itemArr: [
          ['列表A1', '列表A2', '列表A3'],
          ['列表B1', '列表B2', '列表B3'],
          ['列表C1', '列表C2', '列表C3']
        ]
      }
    },
    created() {
      this.onIndexList()
    },
    methods: {
      close(){
        this.$emit('onClose',false)
      },
      onIndexList() {
        var arr = []; // 创建空数组
        for (var i = 'A'.charCodeAt(0); i <= 'Z'.charCodeAt(0); i++) {
          var char = String.fromCharCode(i); // 将 ASCII 值转换为对应的字符
          arr.push(char); // 添加字符到数组中
        }
        arr.unshift('热门联赛')
        this.indexList = arr
      },
      btnChange(item) {
        this.btncount = item.type
      },
      //todo 选中样式逻辑
      onCell(item, index) {

      }
    },
  }
</script>

<style lang="less" scoped>
  /deep/ .u-slide-up-enter-active {
    height: 80% !important;
    overflow-y: auto;
    white-space: nowrap;
  }

  .list-nav {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 20rpx 62rpx 30rpx 30rpx;
    align-items: center;
    justify-content: space-between;
  }

  .list-cell {
    width: 206rpx;
    height: 64rpx;
    background: rgba(242, 242, 242);
    border-radius: 8rpx;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 64rpx;
    color: #313131;
    text-align: center;
  }

  .popup-head {
    width: 100%;
    height: 114rpx;
    box-sizing: border-box;
    padding: 0 154rpx;
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.39);

    /deep/ .u-button--normal {
      margin: 0 15rpx;
    }

    /deep/ .u-button--info {
      color: #909090;
      background-color: #F9F9F9;
      font-size: 32rpx;
    }
  }
</style>